<template>
	<div class="music-list">
		<p class="result">搜索<em>{{ $route.params.keywords }}</em>结果：
			<button @click="playAll">播放全部</button>
		</p>
		<ul>
			<li v-for="(item, i) in listData" :class="{ active: item.media_mid == curSong.mid }" @click="getMusic(item)">
				<!-- <i class="num">{{ i + 1 }}</i> -->
				<div class="con">
					<p class="title">{{ item.songname }}</p>
					<p class="singer">{{ item.singer[0].name }}</p>
				</div>
				<span class="paly"><i></i></span>
			</li>
		</ul>
		<div class="loading-mask" id="loading-mask" v-show="loading"><div class="loader"><svg viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" class="path"></circle></svg></div></div>
	</div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'

export default {
  	name: 'Search',
  	data() {
  		return {
  			listData: {},
  			loading: false,
  		}
  	},
  	created() {
    	this.fetchData()
  	},
  	watch: {
    	'$route': 'fetchData'
  	},
  	computed:{
		...mapState({
			playing: state => state.Play.playing,
			playList: state => state.Play.playList,
		}),
		...mapGetters([
	      	'curSong',
	    ])
	},
  	methods: {
  		...mapMutations([
			'play', 'pause', 'checkMusic', 'changeIndex', 'playAllList'
		]),

		fetchData() {
			this.loading = true;
			this.$store.dispatch('getSearchList', this.$route.params.keywords).then((res) => {
	        	this.listData = res.data.data.list;
	        	this.loading = false;
	      	})
		},

  		getMusic(item) {
  			let curIndex;
  			for(let [index, el] of this.playList.entries()) {
  				if(el.mid == item.media_mid) {
  					curIndex = index
  				}
  			}
  			if(curIndex || curIndex == 0) {
  				this.changeIndex(curIndex)
  			} else {
  				this.checkMusic({
  					mid: item.media_mid,
  					singer: item.singer[0].name,
  					name: item.songname
  				})
  			}

  			this.pause()
  		},

  		playAll() {
  			let newArr = [],
  				hash = {};

  			this.listData.forEach((v)=> {
  				newArr.push({
  					mid: v.media_mid,
  					singer: v.singer[0].name,
  					name: v.songname
  				})
  			});
  			newArr.push(...this.playList);

  			newArr = newArr.reduce((preVal, curVal) => {
				hash[curVal.mid] ? '' : hash[curVal.mid] = true && preVal.push(curVal); 
				return preVal 
			}, [])
			this.playAllList(newArr);
			this.changeIndex(0);
			this.pause()
  		}
  	},
}
</script>

<style lang="stylus" scoped>
@import './../assets/stylus/loading.styl';
.music-list
	background-color #fff
	padding-bottom 60px
	overflow hidden
	.result
		font-size 16px 
		line-height 30px 
		margin 10px 10px 0
		em 
			color red
			font-style normal
			margin 0 5px
		button 
			float right
			outline none
			border none 
			background-color #3385ff
			padding 0 10px
			height 30px
			border-radius 5px 
			color #fff
			clear both
	.info 
		.img 
			height 200px 
			width 100% 
			position relative
			overflow hidden 
			img 
				position absolute 
				top 50%
				transform translateY(-50%)
				width 100% 
		& > .title 
			font-size 16px 
			line-height 2 
			margin 0 10px
		.desc
			font-size 14px 
			color #999 
			line-height 1.5
			margin 0 10px
		.author 
			color #666
			margin 0 10px
			font-size 12px 
			margin-top 5px
			line-height 30px
	ul 
		padding 0 10px
		margin-top 20px
		li
			padding 10px 0 
			border-top 1px solid #eee 
			width 100%
			position relative
			&.active 
				.num, .con, .con .singer
					color #00dc3b
			.num 
				display inline-block
				line-height 40px 
				height 40px 
				font-size 18px
				font-style normal
				width 30px
				text-indent 5px
			.con 
				display inline-block
				height 40px 
				vertical-align middle
				width 80%
				.title 
					font-size 16px 
					white-space nowrap
					width 95%
					overflow hidden 
					text-overflow ellipsis
				.singer 
					font-size 12px 
					color #666
					margin-top 10px
					white-space nowrap
					width 95%
					overflow hidden 
					text-overflow ellipsis
			.paly 
				position absolute 
				right 20px 
				top 50% 
				margin-top -10px
				width 30px 
				height 20px
				line-height 17px
				text-align center
				border 1px solid #ccc 
				border-radius 5px 
				& > i 
					display inline-block
					border none
					border-top 5px solid transparent
					border-bottom 5px solid transparent
					border-left 8px solid #ccc 
</style>